<template>
  <div class="body">
    <van-nav-bar title="拒绝" left-arrow  @click-left="onClickLeft"/>
    <div class="body">
      <div class="comment-text">
        <div>
          <van-field
            class="comment-textare"
            v-model="message"
            rows="5"
            autosize
            type="textarea"
            maxlength="100"
            placeholder="请输入评论内容"
            show-word-limit
          />
          <div class="upload">
            <Camera @resultUoloadId="resultUoloadId" />
          </div>
        </div>
      </div>
      <div class="ensure" v-show="hideshow" @click="ensure">确定</div>
    </div>
  </div>
</template>
<script>
import {
  getRefuse,
} from '@/api/api'
// import service from '@/api/service/myProcess.js'
// import Navbar from '@/components/navBar/navBar_right'
import Camera from '@/components/camera'

export default {
  name: 'App',
  data() {
    return {
      title: this.$route.meta.title,
      rtitle: '',
      rname: '',
      message: '',
      picture: [],
      fileList: [],
      uploadPic: require('@/assets/img/btn_tupian.png'),
      uploadFile: require('@/assets/img/btn_fujian.png'),
      commentImgId: '',
      ApprovalFileId: '',
      docmHeight: document.documentElement.clientHeight, //默认屏幕高度
      showHeight: document.documentElement.clientHeight, //实时屏幕高度
      hideshow: true //显示或者隐藏footer
    }
  },
  components: {
    Camera
  },
  created() {
    this.taskStatus = this.$route.query.taskStatus
    this.init()
  },
  watch: {
    showHeight() {
      if (this.docmHeight > this.showHeight) {
        this.hideshow = false
      } else {
        this.hideshow = true
      }
    }
  },
  mounted() {
    // window.onresize监听页面高度的变化
    window.onresize = () => {
      return (() => {
        this.showHeight = document.documentElement.clientHeight
      })()
    }
  },
  methods: {
    onClickLeft(){
      this.$router.go(-1);
    },
    init() {
      console.log('query)', this.$route.query)
    },
    afterReadPicture(file) {
      console.log(file)
    },
    afterReadFile(file) {
      console.log(file)
    },
    resultUoloadId(val) {
      this.ApprovalFileId = ''
      this.commentImgId = ''
      console.log(val)
      for (let key of val) {
        if (key.type == 'annex') {
          this.ApprovalFileId += key.id + ','
        } else if (key.type == 'img') {
          this.commentImgId += key.id + ','
        }
      }
    },
    ensure() {
      let params = {
        taskId: this.$route.query.taskId,
        fileUrl: this.ApprovalFileId.slice(0, this.commentImgId.length - 1),
        opinion: this.message,
        picUrl: this.commentImgId.slice(0, this.commentImgId.length - 1),
      }
      getRefuse(params)
        .then(res => {
          if (res.code === 200) {
            console.log(res)
            this.$toast(res.message)
            // this.$router.go(-2)
            this.$router.push('/process/approval/MyTaskNeedToExcute')
          } else {
            this.$toast('请求失败请稍后再试')
          }
        })
        .catch(err => {
          this.$toast(err)
        })
    }
  }
}
</script>
<style lang='less' scoped>
.body {
  width: 100vw;
  height: 100vh;
  background-color: #f6f6f6;

  .comment-text {
    width: 100vw;
    // height: 350px;
    background-color: #ffffff;
    padding-top: 20px;
    display: flex;
    justify-content: center;

    .comment-textare {
      width: 95vw;
      height: 200px;
      border: 1px solid #eeeeee;
      border-radius: 5px;
    }
    .upload {
      margin-top: 20px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding-bottom: 60px;
      img {
        width: 30px;
      }
      .uploadFile {
        margin-left: 20px;
      }
    }
  }
  .ensure {
    width: 95vw;
    height: 50px;
    background-color: #1e8df5;
    border-radius: 5px;
    font-size: 16px;
    color: #ffffff;
    font-weight: bold;
    text-align: center;
    line-height: 50px;
    margin-left: 2.5vw;
    position: fixed;
    bottom: 0;
  }
}
</style>
